<template>
    <div id="feedback">
        <div class="header">
            <van-nav-bar title="不凡" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
        <div class="content">
            <div class="main">
                <div class="title">意见与反馈</div>
                <div class="cont">
                    <van-field
                        v-model="content"
                        rows="3"
                        autosize
                        label="留言"
                        type="textarea"
                        maxlength="150"
                        placeholder="请填写你的意见和反馈"
                        show-word-limit
                    />
                </div>
                <div class="connect">
                    <van-cell-group>
                        <van-field v-model="phone" label="联系方式" placeholder="邮箱/手机号/微信号" />
                    </van-cell-group>
                    
                </div>
                <van-button class="bottom" type="primary" size="large" round @click="submitMes">提交</van-button>
            </div>
        </div>
    </div>
</template>
<script>
import { submitAction } from '@/api/feedback';
import { Toast } from "vant";
export default {
    data() {
        return {
            phone:'',
            content:'',
            userInfo:{},
        };
    },
    mounted() {
        this.userInfo = localStorage.getItem('userInfo');
        console.log(this.userInfo);
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        async submitMes(){
            var that = this;
            const data = await submitAction({
                openId : this.userInfo.openId,
                name : this.userInfo.nickName,
                content : this.content,
                phone : this.phone,
            });
            console.log(data);
            if(data.data){
                Toast.success('提交成功');
                setTimeout(()=>{
                    that.content = '';
                    that.phone = '';
                },3000)
            }
        }
    },
};
</script>
<style lang="scss" scoped>
#feedback {
    height: 100vh;
    background: #f4f4f4;
    border-top: 1px solid transparent;
    font-size: 0.32rem;
    .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }
    .content {
        width: 100%;
        height: calc(100% - 1.24rem);
        margin-top: 1.22667rem;
        overflow: auto;
        border-top: 0.01333rem solid transparent;
        .main {
            height: 100%;
            background: #fff;
            padding: 0 0.26667rem;
            .title {
                padding: 0.26667rem 0;
                border-bottom: 1px solid #d9d9d9;
                text-align: left;
            }
            .cont {
                position: relative;
                border-bottom: 1px solid #d9d9d9;
            }
            .connect {
                display: flex;
                border-bottom: 1px solid #d9d9d9;
                margin-bottom: 1.33rem;
            }
        }
    }
}
</style>